import 'package:flutter/material.dart';
import 'package:sample2/components/alert_helper.dart';
import 'package:sample2/model/auth/check_status.dart';
import 'package:sample2/model/auth/register_info.dart';
import 'package:sample2/services/user_service.dart';
import "package:crypto/crypto.dart";
import "dart:convert";

class Register extends StatefulWidget {
  const Register({super.key});
  @override
  State<StatefulWidget> createState() {
    return RegisterState();
  }
}

class RegisterState extends State<Register> {
  String username = "";
  String password = "";
  String gender = "";

  void onchangeUserName(String text) {
    username = text;
  }

  void onchangePassword(String text) {
    password = text;
  }

  void onchangeGender(String text) {
    gender = text;
  }

  void register(BuildContext context) {
    RegisterInfo registerInfo = RegisterInfo(
        password: md5.convert(utf8.encode(password)).toString(), username: username, gender: int.parse(gender));
    CheckStatus status = registerInfo.isValid();
    if (!status.success) {
      AlertHelper.showAlert(context: context, message: status.message);
      return;
    }
    UserService.register(registerInfo).then((response) {
      if (response.respondCode == 0) {
        AlertHelper.showAlert(
            context: context,
            message: "Register Successfully",
            onPressed: () {
              FocusScope.of(context).unfocus();
              Navigator.pop(context);
            });
      } else {
        AlertHelper.showAlert(
            context: context,
            title: "Register Failed",
            message: response.responseMsg!,
            onPressed: () {});
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
      child: Container(
        width: 1 * MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
        margin: EdgeInsets.zero,
        color: Colors.yellow,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 0.8 * MediaQuery.of(context).size.width,
              padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
              decoration: BoxDecoration(
                  // color: Colors.red,
                  border: Border.all(
                color: Colors.black,
                style: BorderStyle.solid,
                width: 1,
              )),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                      width: 80,
                      alignment: Alignment.center,
                      child: const Text(
                        "Username:",
                        style: TextStyle(
                            decoration: TextDecoration.underline,
                            decorationStyle: TextDecorationStyle.dashed),
                      ),
                    ),
                    Expanded(
                      child: TextField(
                          autofocus: true,
                          cursorColor: Colors.black,
                          maxLines: 1,
                          toolbarOptions:
                              const ToolbarOptions(copy: true, cut: true),
                          style: const TextStyle(
                              color: Colors.red,
                              backgroundColor: Colors.white,
                              decorationColor: Colors.green),
                          onChanged: onchangeUserName,
                          decoration: const InputDecoration(
                              hintText: "username",
                              focusColor: Colors.black,
                              hoverColor: Colors.black,
                              focusedBorder: InputBorder.none,
                              contentPadding: EdgeInsets.fromLTRB(5, 5, 5, 5))),
                    )
                  ]),
            ),
            Container(
              width: 0.8 * MediaQuery.of(context).size.width,
              margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
              padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
              decoration: BoxDecoration(
                  // color: Colors.red,
                  border: Border.all(
                color: Colors.black,
                style: BorderStyle.solid,
                width: 1,
              )),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                        width: 80,
                        alignment: Alignment.center,
                        child: const Text(
                          "Password:",
                        )),
                    Expanded(
                      child: TextField(
                          obscureText: true,
                          textInputAction: TextInputAction.done,
                          autofocus: false,
                          keyboardType: TextInputType.text,
                          onChanged: onchangePassword,
                          decoration: const InputDecoration(
                              hintText: "password",
                              contentPadding: EdgeInsets.fromLTRB(5, 5, 5, 5))),
                    )
                  ]),
            ),
            Container(
              width: 0.8 * MediaQuery.of(context).size.width,
              margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
              padding: const EdgeInsets.fromLTRB(5, 0, 5, 0),
              decoration: BoxDecoration(
                  // color: Colors.red,
                  border: Border.all(
                color: Colors.black,
                style: BorderStyle.solid,
                width: 1,
              )),
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Container(
                        width: 80,
                        alignment: Alignment.center,
                        child: const Text(
                          "Gender:",
                        )),
                    Expanded(
                      child: TextField(
                          textInputAction: TextInputAction.done,
                          autofocus: false,
                          keyboardType: TextInputType.number,
                          onChanged: onchangeGender,
                          decoration: const InputDecoration(
                              hintText: "gender",
                              contentPadding: EdgeInsets.fromLTRB(5, 5, 5, 5))),
                    )
                  ]),
            ),
            Container(
              margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
              child: TextButton(
                style: ButtonStyle(
                    alignment: Alignment.center,
                    fixedSize: MaterialStateProperty.all(
                        Size(MediaQuery.of(context).size.width * 0.6, 44)),
                    backgroundColor: MaterialStateProperty.all(Colors.red)),
                onPressed: () {
                  register(context);
                },
                child: const Text(
                  "Register",
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.fromLTRB(0, 10, 0, 0),
              child: TextButton(
                style: ButtonStyle(
                    alignment: Alignment.center,
                    fixedSize: MaterialStateProperty.all(
                        Size(MediaQuery.of(context).size.width * 0.6, 44)),
                    backgroundColor:
                        MaterialStateProperty.all(Colors.lightBlue)),
                onPressed: () {
                  Navigator.of(context).pop();
                },
                child: const Text(
                  "Cancel",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            )
          ],
        ),
      ),
    ));
  }
}
